<template>
  <div style="display: flex;
	flex-direction: column;">
	<div style="height: 80px;">  </div>
	<div class="about-us">
		<div style="flex: 2;" >
			
		</div>
		<div class="bon" style="flex: 3;cursor: pointer;" @click="about">
			关于我们
		</div>
		<div class="bon" style="flex: 3;cursor: pointer;" @click="join">
			加入我们
		</div>
		<div class="bon" style="flex: 3;cursor: pointer;" @click="contact">
			联系方式
		</div>
		<div class="bon" style="flex: 3;cursor: pointer;" @click="cooperate">
			建立合作
		</div>
		<div class="bon" style="flex: 3;cursor: pointer;" @click="feedback">
			问题反馈
		</div>
		<div style="flex: 2;">
			
		</div>
	</div>
	<div class="thanks">
		感谢您对本团队的支持与信任，祝您生活愉快。
	</div>
  </div>
</template>

<script setup>
	import router from '@/router';
	import { useRoute } from 'vue-router';
	function about (){
		router.push({name: 'AboutUs'})
	}
	function join (){
		router.push({name: 'Join'})
	}
	function contact (){
		router.push({name: 'Contact'})
	}
	function cooperate (){
		router.push({name: 'Cooperate'})
	}
	function feedback (){
		router.push({name: 'Feedback'})
	}

</script>

<style scoped lang="scss">
.about-us{
  	color: #606266;
  	border-top: 1px solid #606266;
	padding-top: 40px;
	padding-bottom: 40px;
	display: flex;
	flex-direction: row;
	text-align: center;
	font-weight: 600;
  }
  .thanks{
	  color: #606266;
	  border-top: 1px solid #606266;
	  padding-top: 10px;
	  font-size: 0.85rem;
	  padding-bottom: 50px;
	  align-self: center;
	  width: 90%;
	  text-align: center;
	  cursor: default;
  }
  .bon:hover{
	  color: #00aaff;
  }
  .bon:active{
	  color: #606266;
  }
</style>